<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>个人信息</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片 -->
		<el-card class="box-card">
			<el-row>
				<el-col :lg="10" :md="10">
					<div class="uploadtx">
						<h3 style="text-align: center;padding: 10px 0;">上传头像</h3>
						<!-- 图片上传 -->
						<el-upload
							class="avatar-uploader"
							:action="uploadAction"
							:data="{ID:dataForm.Id}"
							:headers="getHeaders"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload"
						>
							<img v-if="getimgurl" :src="getimgurl" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
				</el-col>
				<el-col :lg="14" :md="14">
					<div>
						<!-- 表单 -->
						<el-form :model="dataForm" :rules="FormRules" ref="FormRef" label-width="100px">
							<el-form-item label="编号" prop="UserCode">
								<el-input v-model="dataForm.UserCode"></el-input>
							</el-form-item>
							<el-form-item label="用户名" prop="UserName">
								<el-input v-model="dataForm.UserName"></el-input>
							</el-form-item>
							<el-form-item label="真实姓名" prop="RealName">
								<el-input v-model="dataForm.RealName"></el-input>
							</el-form-item>
							<el-form-item label="微信号">
								<el-input v-model="dataForm.Wxcode" placeholder="请输入微信号"></el-input>
							</el-form-item>
							<el-form-item label="QQ号">
								<el-input v-model="dataForm.qq" placeholder="请输入QQ号"></el-input>
							</el-form-item>
							<el-form-item label="邮箱号">
								<el-input v-model="dataForm.Email" placeholder="请输入邮箱号"></el-input>
							</el-form-item>
							<el-form-item label="手机号">
								<el-input v-model="dataForm.Tel" placeholder="请输入手机号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm()">立即修改</el-button>
								<el-button @click="resetForm()">重置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
	created() {
		//获取当前用户信息
		this.getUser()
	},
	data() {
		return {
			dataForm: {
				Id: 0,
				UserCode: '',
				UserName: '',
				RealName: '',
				Wxcode: '',
				qq: '',
				Headurl: '',
				Email:'',
				Tel:''
			},
			FormRules: {
				UserCode: [
					{ required: true, message: '请输入编号', trigger: 'blur' }
				],
				UserName: [
					{ required: true, message: '请输入用户名', trigger: 'blur' }
				],
				RealName: [
					{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		//获取数据
		getUser() {
			this.$get('/api/User/GetUser_dq')
				.then(res => {
					console.log(res)
					this.dataForm.Id = res.data.id
					this.dataForm.UserCode = res.data.userCode
					this.dataForm.UserName = res.data.userName
					this.dataForm.RealName = res.data.realName
					this.dataForm.Wxcode = res.data.wxcode
					this.dataForm.qq = res.data.qq
					this.dataForm.Headurl = res.data.headUrl
					this.dataForm.Email = res.data.email
					this.dataForm.Tel = res.data.tel
				})
				.catch(err => {
					console.log(err)
				})
		},
		//重置
		resetForm() {
			this.$refs.FormRef.resetFields()
		},
		//提交
		submitForm() {
			this.$get('/api/User/EditUserGR', this.dataForm)
				.then(res => {
					if (res.code == 0) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.getUser()
					} else {
						this.$message.error(res.msg)
					}
				})
				.catch(err => {
					console.log(err)
				})
		},
		//文件上传完成后的事件
		handleAvatarSuccess(res, file) {
			console.log(res)
			if (res.success) {
				this.$message({
					type: 'success',
					message: res.msg
				})
				this.dataForm.Headurl = res.data.url
			} else {
				this.$message.error(res.msg)
			}
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			}
			return isJPG && isLt2M
		}
	},
	computed: {
		//获取网站地址
		...mapGetters(['baseurl']),
		//获取头像上传地址
		uploadAction() {
			return this.baseurl + 'api/User/UpLoadTX'
		},
		//获取token
		...mapGetters(['userToken']),
		//获取header信息
		getHeaders() {
			const data = {
				mytoken: this.userToken
			}
			return data
		},
		//获取头像路径
		getimgurl() {
			return this.baseurl + this.dataForm.Headurl
		}
	}
}
</script>
<style scoped>
.el-input {
	max-width: 360px;
}
.uploadtx {
	text-align: center;
	margin: 10px 0;
}
.el-row {
	padding: 40px;
}
</style>